<template>
  <div class="ManageServer-page">
    <div class="header">
      <p class="title">权限 | 用户列表</p>
      <div class="form">
        <el-form
          :inline="true"
          :model="queryData"
          ref="searchForm"
          class="demo-form-inline"
          size="small"
        >
          <el-form-item label="">
            <el-input
              v-model="queryData.TrueName"
              placeholder="请输入真实姓名"
            ></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-input
              v-model="queryData.Email"
              placeholder="请输入邮箱"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch">查询</el-button>
          </el-form-item>
          <el-button size="small" @click="onAdd">新增</el-button>
          <el-button size="small" @click="onPDM">同步PDM</el-button>
        </el-form>

        <div style="display: inline-block"></div>
      </div>
    </div>

    <div class="body">
      <el-row :gutter="20" type="flex" justify="center">
        <el-col :span="8">
          <el-table
            :data="GroupTableData"
            border
            style="width: 100%"
            @row-click="rowClick"
          >
            <el-table-column type="index" width="30" align="center">
            </el-table-column>
            <el-table-column prop="GroupName" label="名称" align="center">
            </el-table-column>
            <el-table-column
              prop="ReMark"
              label="备注"
              align="center"
              width="150"
            >
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange1"
            @current-change="handleCurrentChange1"
            :current-page="queryGroupData.groupintPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="queryGroupData.groupnumber"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total1"
          >
          </el-pagination>
        </el-col>
        <el-col :span="16">
          <el-table :data="UserTableData" border style="width: 100%">
            <el-table-column type="index" width="30" align="center">
            </el-table-column>
            <el-table-column prop="Name" label="用户名" align="center">
            </el-table-column>
            <el-table-column prop="TrueName" label="真实姓名" align="center">
            </el-table-column>
            <el-table-column prop="Email" label="电子邮箱" align="center">
            </el-table-column>
            <el-table-column prop="GroupName" label="权限" align="center">
            </el-table-column>
            <el-table-column prop="" label="操作" align="center">
              <template v-slot="{ row }">
                <el-link type="primary" :underline="false" @click="edit(row)"
                  >编辑</el-link
                >
                <el-link
                  type="warning"
                  style="margin: 0 10px"
                  :underline="false"
                  @click="editPassword(row)"
                  >修改密码</el-link
                >
                <el-popconfirm
                  title="这一段内容确定删除吗？"
                  @confirm="confirmDel(row)"
                >
                  <el-link slot="reference" type="danger" :underline="false"
                    >删除</el-link
                  >
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange2"
            @current-change="handleCurrentChange2"
            :current-page="queryData.intPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="queryData.number"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </div>

    <div class="dialog">
      <!-- 编辑对话框 -->
      <el-dialog
        :title="title"
        :visible.sync="showDialog"
        width="35%"
        :before-close="handleClose"
      >
        <el-form :model="form" label-width="80px">
          <el-form-item label="用户名">
            <el-input
              :disabled="disabled"
              v-model="form.Name"
              placeholder="请填写用户名"
            ></el-input>
          </el-form-item>
          <el-form-item label="所在组">
            <el-select
              v-model="form.GroupID"
              placeholder="请选择活动区域"
              style="width: 100%"
            >
              <el-option
                v-for="ele in GroupTableData"
                :key="ele.ID"
                :label="ele.GroupName"
                :value="ele.ID"
              ></el-option>
              <!-- <el-option label="管理员" value="2"></el-option> -->
            </el-select>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="form.Email" placeholder="请填写邮箱"></el-input>
          </el-form-item>
          <el-form-item label="真实姓名">
            <el-input
              v-model="form.TrueName"
              placeholder="请填写姓名"
            ></el-input>
          </el-form-item>

          <el-row :gutter="20" type="flex" justify="center">
            <el-col :span="10">
              <el-form-item style="text-align: center">
                <el-button type="primary" @click="onSubmitEdit" size="small"
                  >保存</el-button
                >
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-dialog>

      <!-- 新增对话框 -->
      <el-dialog
        :title="title"
        :visible.sync="AddShowDialog"
        width="35%"
        :before-close="handleCloseAdd"
      >
        <el-form
          ref="Addform"
          :model="Addform"
          label-width="80px"
          :rules="rules2"
        >
          <el-form-item label="用户名">
            <el-input
              v-model="Addform.Name"
              placeholder="请填写用户名"
            ></el-input>
          </el-form-item>
          <el-form-item label="所在组" prop="GroupID">
            <el-select
              v-model="Addform.GroupID"
              placeholder="请选择活动区域"
              style="width: 100%"
            >
              <el-option
                v-for="ele in GroupTableData"
                :key="ele.GroupID"
                :label="ele.GroupName"
                :value="ele.GroupID"
              ></el-option>
              <!-- <el-option label="管理员" value="2"></el-option> -->
            </el-select>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input
              v-model="Addform.Email"
              placeholder="请填写邮箱"
            ></el-input>
          </el-form-item>
          <el-form-item label="真实姓名">
            <el-input
              v-model="Addform.TrueName"
              placeholder="请填写姓名"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input
              type="password"
              v-model="Addform.PassWord"
              placeholder="请填写密码"
            ></el-input>
          </el-form-item>
          <el-row :gutter="20" type="flex" justify="center">
            <el-col :span="10">
              <el-form-item style="text-align: center">
                <el-button type="primary" @click="onSubmitAdd" size="small"
                  >保存</el-button
                >
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-dialog>

      <el-dialog
        title="修改用户密码"
        :visible.sync="passwordDialog"
        width="30%"
        :before-close="handleClosepasswordDialog"
      >
        <el-form
          label-width="80px"
          ref="passwordForm"
          :model="passwordForm"
          :rules="rules3"
        >
          <el-form-item label="账号">
            <el-input
              :disabled="ChangeUserPw"
              v-model="passwordForm.pUserName"
            ></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="pNewPw">
            <el-input type="password" v-model="passwordForm.pNewPw"></el-input>
          </el-form-item>
          <el-row :gutter="20" type="flex" justify="center">
            <el-col :span="10">
              <el-form-item style="text-align: center">
                <el-button type="primary" @click="onSubmit" size="small"
                  >保存</el-button
                >
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getUserList, getGroupList, getUserInfo } from "@/api/user";
import { SettingApi } from "@/api/dashboard";
export default {
  data() {
    return {
      rules3: {
        pNewPw: [
          {
            required: true,
            message: "请输入",
            trigger: "blur",
          },
        ],
      },
      rules2: {
        GroupID: [
          {
            required: true,
            message: "请选择",
            trigger: "change",
          },
        ],
      },
      searchForm: {
        Name: "",
        state: "",
      },

      title: "新增用户",
      showDialog: false,
      AddShowDialog: false,
      form: {
        Name: "",
        Email: "",
        GroupID: "",
        TrueName: "",
        PassWord: "",
      },
      Addform: {
        Name: "",
        TrueName: "",
        Email: "",
        GroupID: "",
        PassWord: "",
        IsAutoLogin: false,
        IsRememberPassWord: true,
      },
      passwordForm: {
        pUserName: "",
        pNewPw: "",
        pOldPw: "",
      },
      GroupTableData: [],
      UserTableData: [],
      passwordDialog: false,
      disabled: false,
      ChangeUserPw: false,
      queryData: {
        number: 10, //每页数量
        intPage: 1, //当前页
        TrueName: "", //真实姓名
        GroupID: -1, //组ID
        Email: "", //邮箱
      },
      queryGroupData: {
        groupnumber: 10,
        groupintPage: 1,
      },
      total: 0,
      total1: 0,
    };
  },

  created() {
    this.getGroupListAPI();
    this.getUserListAPI();
  },
  methods: {
    async getUserListAPI() {
      const res = await getUserList(this.queryData);
      console.log(res);
      this.total = res.data.total;
      this.UserTableData = res.data.rows;
    },
    async getGroupListAPI() {
      const res = await getGroupList(this.queryGroupData);
      console.log(res);
      this.total1 = res.data.total;
      this.GroupTableData = res.data.rows;
    },
    //todo 修改用户
    async onSubmitEdit() {
      const res = await SettingApi({
        postpara: {
          posttype: "ChangeUserInfo",
        },
        ureentity: {
          ...this.form,
        },
      });
      // console.log(res);
      const data = JSON.parse(res.data);
      if (data.Result) {
        this.$message.success(data.Message);
      } else {
        this.$message.error(data.Message);
      }
      this.getUserListAPI();
      this.handleClose();
    },
    //todo 新增用户
    async onSubmitAdd() {
      this.$refs.Addform.validate(async (isok) => {
        if (isok) {
          const res = await SettingApi({
            postpara: {
              posttype: "AddUserInfo",
            },
            ureentity: {
              ...this.Addform,
            },
          });
          const data = JSON.parse(res.data);
          if (data.Result) {
            this.$message.success(data.Message);
          } else {
            this.$message.error(data.Message);
          }
        }
      });

      // console.log(res);
      this.getUserListAPI();
      this.handleCloseAdd();
    },
    //todo 修改密码
    async onSubmit() {
      this.$refs.passwordForm.validate(async (isok) => {
        if (isok) {
          const res = await SettingApi({
            postpara: {
              posttype: "ChangeUserPw",
            },
            ureentity: {
              ...this.passwordForm,
            },
          });
          const data = JSON.parse(res.data);
          if (data.Result) {
            this.$message.success(data.Message);
          } else {
            this.$message.error(data.Message);
          }
        }
      });

      this.handleClosepasswordDialog();
    },
    // todo 删除用户
    async confirmDel(row) {
      const res = await SettingApi({
        postpara: {
          posttype: "DeleteUserInfo",
        },
        DelUsername: row.Name,
      });
      // console.log(res);
      const data = JSON.parse(res.data);
      if (data.Result) {
        this.$message.success(data.Message);
      } else {
        this.$message.error(data.Message);
      }
      this.getUserListAPI();
    },
    onAdd() {
      this.title = "新增用户";
      // this.disabled = false;
      this.AddShowDialog = true;
    },
    async edit(row) {
      this.title = "编辑用户";
      const res = await getUserInfo(row.Name);
      // console.log(res);
      this.disabled = true;
      this.form = res.data;
      this.showDialog = true;
    },
    handleClose() {
      this.form = {
        Name: "",
        Email: "",
        GroupID: "",
        TrueName: "",
        PassWord: "",
      };
      this.showDialog = false;
    },
    handleClosepasswordDialog() {
      this.passwordForm = {
        pUserName: "",
        pNewPw: "",
        pOldPw: "",
      };
      this.passwordDialog = false;
    },
    handleCloseAdd() {
      this.Addform = {
        Name: "",
        TrueName: "",
        Email: "",
        GroupName: "",
        PassWord: "",
        IsAutoLogin: false,
        IsRememberPassWord: true,
      };
      this.AddShowDialog = false;
    },
    async editPassword(row) {
      // const res = await getUserInfo(row.Name);
      this.ChangeUserPw = true;
      this.passwordForm.pUserName = row.Name;
      this.passwordForm.pOldPw = row.PassWord;
      this.passwordDialog = true;
    },
    // todo 同步PDM
    async onPDM() {
      const res = await SettingApi({
        postpara: {
          posttype: "SyncUser",
        },
      });
      const data = JSON.parse(res.data);
      if (data.Result) {
        this.$message.success(data.Message);
      } else {
        this.$message.error(data.Message);
      }
      // console.log(res);
    },
    rowClick(row) {
      console.log(row);
      this.queryData.GroupID = row.ID;
      this.getUserListAPI();
    },
    onSearch() {
      this.getUserListAPI();
    },
    handleSizeChange2(val) {
      // ! 每页条数
      console.log(val);
      this.queryData.number = val;
      this.getUserListAPI();
    },
    handleCurrentChange2(val) {
      // ! 当前页
      console.log(val);
      this.queryData.intPage = val;
      this.getUserListAPI();
    },
    handleSizeChange1(val) {
      // ! 每页条数
      console.log(val);
      this.queryData.number = val;
      this.getGroupListAPI();
    },
    handleCurrentChange1(val) {
      // ! 当前页
      console.log(val);
      this.queryData.intPage = val;
      this.getGroupListAPI();
    },
  },
};
</script>

<style lang="scss" scoped>
.ManageServer-page {
  background-color: #fff;
  padding: 20px;

  .header {
    display: flex;
    justify-content: space-between;
    // border-bottom: 1px solid #ccc;
    .title {
      font-size: 20px;
    }

    .form {
      padding-top: 20px;
      padding-right: 20px;
    }
  }

  .body {
    padding: 50px 10px;
  }

  .dialog {
  }
}
</style>
